<template>
	<view class="my-picker-container" :class="customClass" :align="align">
		<!-- 选择器触发区域 -->
		<view class="picker-trigger" @click="handleOpen">
			<!-- 主要内容区域 -->
			<view class="trigger-content" :class="{'placeholder': !hasValue}">
				<text v-if="!hasValue">{{ placeholder }}</text>
				<text v-if="hasValue">{{ showValue }}</text>
			</view>
			
			<!-- 操作区域 -->
			<view class="action-area">
				<!-- 清除按钮 - 只依赖clearable属性 -->
				<view class="clear-icon" v-if="clearable && hasValue" @click.stop="handleClear">✕</view>
				
				<!-- 下拉箭头 -->
				<view class="arrow-icon">
					<text class="iconfont icon-arrow-down-filling"></text>
				</view>
			</view>
		</view>
		
		<!-- 弹出层 -->
		<view class="my-picker" v-if="visible">
			<!-- 遮罩层 -->
			<view class="picker-mask" @click="handleCancel"></view>
			
			<!-- 选择器主体 -->
			<view class="picker-panel">
				<!-- 头部 -->
				<view class="picker-header">
					<view class="picker-btn cancel" @click="handleCancel">取消</view>
					<view class="picker-title">{{ title }}</view>
					<view class="picker-btn confirm" @click="handleConfirm">确定</view>
				</view>
				
				<!-- 搜索区域 -->
				<view class="picker-search" v-if="searchable">
					<view class="search-box">
						<text class="iconfont icon-search"></text>
						<input 
							class="search-input" 
							type="text" 
							v-model="searchKeyword" 
							placeholder="搜索" 
							@input="handleSearch"
							confirm-type="search"
							focus
						/>
						<text class="iconfont icon-close" v-if="searchKeyword" @click="clearSearch"></text>
					</view>
				</view>
				
				<!-- 搜索结果区域 -->
				<view class="search-results" v-if="searchable && searchResultsVisible">
					<scroll-view scroll-y class="results-scroll">
						<view 
							class="result-item" 
							v-for="(item, index) in searchResults" 
							:key="index"
							@click="handleSearchItemClick(item)"
						>
							<text class="result-text">{{ getItemLabel(item) }}</text>
							<text class="result-path">{{ getItemPath(item) }}</text>
						</view>
						<view class="no-results" v-if="searchResults.length === 0">
							无搜索结果
						</view>
					</scroll-view>
				</view>
				
				<!-- 选择区域 -->
				<view class="picker-content" v-show="!searchResultsVisible">
					<view class="picker-columns">
						<scroll-view 
							scroll-y 
							class="picker-column" 
							v-for="(column, columnIndex) in columns" 
							:key="columnIndex"
						>
							<view 
								class="picker-item" 
								:class="{ active: isItemSelected(item, columnIndex) }"
								v-for="(item, index) in column" 
								:key="index"
								@click="handleItemClick(item, columnIndex)"
							>
								{{ getItemLabel(item) }}
							</view>
						</scroll-view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	name: 'MyPicker',
	props: {
		// 数据源
		data: {
			type: Array,
			default: () => []
		},
		// 选中的值，可以是单值或数组
		modelValue: {
			type: [String, Number, Array],
			default: null
		},
		// 标题
		title: {
			type: String,
			default: '请选择'
		},
		// 标签字段名
		labelField: {
			type: String,
			default: 'label'
		},
		// 值字段名
		valueField: {
			type: String,
			default: 'value'
		},
		// 子项字段名
		childrenField: {
			type: String,
			default: 'children'
		},
		// 是否可搜索
		searchable: {
			type: Boolean,
			default: false
		},
		// 是否允许选择任意级别
		selectAnyLevel: {
			type: Boolean,
			default: true
		},
		// 占位文本
		placeholder: {
			type: String,
			default: '请选择'
		},
		// 是否显示清除按钮
		clearable: {
			type: Boolean,
			default: true
		},
		// 是否多选
		multiple: {
			type: Boolean,
			default: false
		},
		// 是否禁用
		disabled: {
			type: Boolean,
			default: false
		},
		// 自定义类名
		customClass: {
			type: String,
			default: ''
		},
		// 值类型
		valueType: {
			type: String,
			default: 'auto' // 可选值: 'auto', 'string', 'number', 'boolean'
		},
		// 文本对齐方式
		align: {
			type: String,
			default: 'left' // 可选值: 'left', 'right'
		}
	},
	data() {
		return {
			visible: false,
			columns: [],
			selectedIndexes: [],
			selectedItems: [],
			searchKeyword: '',
			searchResults: [],
			searchResultsVisible: false,
			tempSelectedValues: [],
			tempSelectedLabels: [],
			pickerOpen: false
		}
	},
	computed: {
		hasValue() {
			if (this.multiple) {
				return this.modelValue && Array.isArray(this.modelValue) && this.modelValue.length > 0;
			}
			// 处理空字符串和null/undefined的情况
			return this.modelValue !== null && this.modelValue !== undefined && this.modelValue !== '';
		},
		showValue() {
			if (!this.hasValue) return '';
			
			if (this.multiple) {
				if (Array.isArray(this.modelValue)) {
					// 获取标签，如果已有选中项
					if (this.tempSelectedLabels && this.tempSelectedLabels.length > 0) {
						return this.tempSelectedLabels[this.tempSelectedLabels.length - 1];
					}
					
					// 查找标签
					const labels = [];
					for (const value of this.modelValue) {
						const item = this.findItemByValueInData(this.data, value);
						if (item) {
							labels.push(this.getItemLabel(item));
						} else {
							labels.push(value);
						}
					}
					return labels.join(', ');
				}
				return '';
			} else {
				// 如果是空字符串，显示占位符
				if (this.modelValue === '') return '';
				
				// 如果有临时标签值，优先使用
				if (this.tempSelectedLabels && this.tempSelectedLabels.length > 0) {
					return this.tempSelectedLabels[this.tempSelectedLabels.length - 1];
				}
				
				// 尝试从数据中查找
				const item = this.findItemByValueInData(this.data, this.modelValue);
				if (item) {
					return this.getItemLabel(item);
				}
				
				// 如果无法找到标签，返回值本身（但确保它是字符串）
				return String(this.modelValue || '');
			}
		}
	},
	watch: {
		data: {
			handler(newVal) {
				if (newVal && newVal.length > 0) {
					// 初始化列数据
					this.initColumns();
				}
			},
			immediate: true
		},
		modelValue: {
			handler(newVal) {
				if (newVal) {
					console.log("newVal", newVal)
					// 初始化选中值
					this.initSelected();
				}
			},
			immediate: true
		}
	},
	methods: {
		// 显示选择器
		show() {
			this.visible = true;
			// 初始化临时选中值
			this.tempSelectedValues = Array.isArray(this.modelValue) 
				? [...this.modelValue] 
				: this.modelValue ? [this.modelValue] : [];
			
			// 根据当前值初始化列和选中项
			this.initColumns();
			this.initSelected();
		},
		
		// 隐藏选择器
		hide() {
			this.visible = false;
			this.searchKeyword = '';
			this.searchResults = [];
			this.searchResultsVisible = false;
		},
		
		// 初始化列数据
		initColumns() {
			if (!this.data || this.data.length === 0) return;
			
			this.columns = [this.data];
			
			// 如果有选中的值，初始化对应的列
			if (this.tempSelectedValues && this.tempSelectedValues.length > 0) {
				let currentData = this.data;
				
				for (let i = 0; i < this.tempSelectedValues.length; i++) {
					const value = this.tempSelectedValues[i];
					const foundItem = this.findItemByValue(currentData, value);
					
					if (foundItem) {
						this.selectedItems[i] = foundItem;
						this.selectedIndexes[i] = currentData.findIndex(item => 
							String(this.getItemValue(item)) === String(value)
						);
						
						// 如果有子项，添加到下一列
						const children = this.getItemChildren(foundItem);
						if (children && children.length > 0) {
							this.columns[i + 1] = children;
							currentData = children;
						} else {
							break;
						}
					} else {
						break;
					}
				}
			}
		},
		
		// 初始化选中项
		initSelected() {
			this.selectedItems = [];
			this.selectedIndexes = [];
			this.tempSelectedLabels = [];
			
			// 处理空值情况
			if (!this.modelValue) {
				this.tempSelectedValues = [];
				return;
			}
			
			// 根据modelValue设置临时值
			if (Array.isArray(this.modelValue)) {
				this.tempSelectedValues = [...this.modelValue];
			} else {
				this.tempSelectedValues = [this.modelValue];
			}
			
			// 如果没有数据，则无法初始化选中项
			if (!this.data || this.data.length === 0 || !this.tempSelectedValues || this.tempSelectedValues.length === 0) {
				return;
			}
			
			let currentData = this.data;
			for (let i = 0; i < this.tempSelectedValues.length; i++) {
				const value = this.tempSelectedValues[i];
				if (value === null || value === undefined) continue;
				
				const foundItem = this.findItemByValue(currentData, value);
				if (foundItem) {
					this.selectedItems[i] = foundItem;
					this.selectedIndexes[i] = currentData.findIndex(item => 
						String(this.getItemValue(item)) === String(value)
					);
					this.tempSelectedLabels[i] = this.getItemLabel(foundItem);
					
					// 准备下一列数据
					const children = this.getItemChildren(foundItem);
					if (children && children.length > 0) {
						currentData = children;
					} else {
						break;
					}
				} else {
					break;
				}
			}
		},
		
		// 根据值查找项
		findItemByValue(items, value) {
			if (!items || items.length === 0) return null;
			
			// 转为字符串进行比较，确保数字和字符串类型值能正常匹配
			const valueStr = String(value);
			return items.find(item => String(this.getItemValue(item)) === valueStr);
		},
		
		// 获取项的标签
		getItemLabel(item) {
			return item[this.labelField];
		},
		
		// 获取项的值
		getItemValue(item) {
			return item[this.valueField];
		},
		
		// 获取项的子项
		getItemChildren(item) {
			return item[this.childrenField];
		},
		
		// 判断项是否被选中
		isItemSelected(item, columnIndex) {
			return this.selectedIndexes[columnIndex] !== undefined && 
				String(this.getItemValue(item)) === String(this.getItemValue(this.selectedItems[columnIndex]));
		},
		
		// 处理项点击
		handleItemClick(item, columnIndex) {
			// 更新选中状态
			this.selectedItems.splice(columnIndex, this.selectedItems.length - columnIndex);
			this.selectedIndexes.splice(columnIndex, this.selectedIndexes.length - columnIndex);
			this.tempSelectedValues.splice(columnIndex, this.tempSelectedValues.length - columnIndex);
			this.tempSelectedLabels.splice(columnIndex, this.tempSelectedLabels.length - columnIndex);
			
			this.selectedItems[columnIndex] = item;
			this.selectedIndexes[columnIndex] = this.columns[columnIndex].indexOf(item);
			this.tempSelectedValues[columnIndex] = this.getItemValue(item);
			this.tempSelectedLabels[columnIndex] = this.getItemLabel(item);
			
			// 处理子项
			const children = this.getItemChildren(item);
			if (children && children.length > 0) {
				this.columns.splice(columnIndex + 1, this.columns.length - columnIndex - 1, children);
			} else {
				// 如果没有子项，则删除后面的列
				this.columns.splice(columnIndex + 1, this.columns.length - columnIndex - 1);
			}
		},
		
		// 处理搜索
		handleSearch() {
			if (!this.searchKeyword) {
				this.searchResults = [];
				this.searchResultsVisible = false;
				return;
			}
			
			this.searchResultsVisible = true;
			this.searchResults = this.searchData(this.data, this.searchKeyword);
		},
		
		// 递归搜索数据
		searchData(data, keyword, parentPath = [], results = []) {
			if (!data || data.length === 0) return results;
			
			for (const item of data) {
				const label = this.getItemLabel(item);
				const currentPath = [...parentPath, item];
				
				// 检查当前项是否匹配
				if (label && label.toLowerCase().includes(keyword.toLowerCase())) {
					item._path = currentPath;
					results.push(item);
				}
				
				// 递归搜索子项
				const children = this.getItemChildren(item);
				if (children && children.length > 0) {
					this.searchData(children, keyword, currentPath, results);
				}
			}
			
			return results;
		},
		
		// 获取项的路径文本
		getItemPath(item) {
			if (!item._path || item._path.length <= 1) return '';
			
			return item._path
				.slice(0, -1)
				.map(pathItem => this.getItemLabel(pathItem))
				.join(' > ');
		},
		
		// 处理搜索项点击
		handleSearchItemClick(item) {
			// 清空搜索
			this.clearSearch();
			
			// 设置选中路径
			if (item._path) {
				const path = item._path;
				this.selectedItems = [...path];
				this.tempSelectedValues = path.map(pathItem => this.getItemValue(pathItem));
				this.tempSelectedLabels = path.map(pathItem => this.getItemLabel(pathItem));
				
				// 重新构建列
				this.rebuildColumns(path);
			}
		},
		
		// 根据路径重建列
		rebuildColumns(path) {
			this.columns = [this.data];
			this.selectedIndexes = [];
			
			let currentData = this.data;
			for (let i = 0; i < path.length; i++) {
				const item = path[i];
				this.selectedIndexes[i] = currentData.findIndex(dataItem => 
					String(this.getItemValue(dataItem)) === String(this.getItemValue(item))
				);
				
				// 准备下一列数据
				const children = this.getItemChildren(item);
				if (children && children.length > 0) {
					this.columns[i + 1] = children;
					currentData = children;
				} else {
					break;
				}
			}
		},
		
		// 清除搜索
		clearSearch() {
			this.searchKeyword = '';
			this.searchResults = [];
			this.searchResultsVisible = false;
		},
		
		// 获取处理后的值
		getProcessedValue(value) {
			if (value === null || value === undefined) {
				return null;
			}
			
			// 自动检测类型并转换
			// 检查原始值类型
			const originalType = typeof value;
			
			// 检测是否为数字字符串
			const isNumericString = !isNaN(value) && !isNaN(parseFloat(value));
			
			// 检测是否为布尔值字符串
			const isBooleanString = value === 'true' || value === 'false';
			
			if (this.valueType === 'string') {
				// 如果明确指定字符串类型
				return String(value);
			} else if (this.valueType === 'number') {
				// 如果明确指定数字类型
				return Number(value);
			} else if (this.valueType === 'boolean') {
				// 如果明确指定布尔类型
				return Boolean(value);
			} else {
				// 自动模式：智能检测并转换
				if (originalType === 'number') {
					return Number(value);
				} else if (originalType === 'boolean') {
					return Boolean(value);
				} else if (isNumericString) {
					// 如果是数字字符串，转为数字
					return Number(value);
				} else if (isBooleanString) {
					// 如果是布尔值字符串，转为布尔值
					return value === 'true';
				} else {
					// 保持原始值
					return value;
				}
			}
		},
		
		// 检测值的原始类型
		detectValueType(value) {
			// 如果值为null或undefined
			if (value === null || value === undefined) {
				return 'null';
			}
			
			// 获取JavaScript的原始类型
			const jsType = typeof value;
			
			// 优先返回原始类型
			if (jsType === 'number' || jsType === 'boolean') {
				return jsType;
			}
			
			// 字符串需要进一步判断
			if (jsType === 'string') {
				// 检测是否为数字字符串
				if (!isNaN(value) && !isNaN(parseFloat(value))) {
					return 'number';
				}
				
				// 检测是否为布尔值字符串
				if (value === 'true' || value === 'false') {
					return 'boolean';
				}
				
				// 其他情况作为普通字符串
				return 'string';
			}
			
			// 对象类型
			return 'object';
		},
		
		// 处理确认
		handleConfirm() {
			// 检查是否允许选择当前级别
			if (!this.selectAnyLevel && this.hasChildren(this.selectedItems[this.selectedItems.length - 1])) {
				uni.showToast({
					title: '请选择到最后一级',
					icon: 'none'
				});
				return;
			}
			
			// 基于原始数据类型，处理最终值
			let finalValue = null;
			let detectedValueType = 'auto'; // 默认自动
			
			if (this.tempSelectedValues.length > 0) {
				if (this.multiple) {
					// 多选模式返回数组
					finalValue = this.tempSelectedValues.map(v => this.getProcessedValue(v));
				} else {
					// 单选模式返回最后一个选中值
					const lastValue = this.tempSelectedValues[this.tempSelectedValues.length - 1];
					
					// 检测值的类型（如果没有明确指定valueType）
					if (this.valueType === 'auto') {
						detectedValueType = this.detectValueType(lastValue);
					} else {
						detectedValueType = this.valueType;
					}
					
					finalValue = this.getProcessedValue(lastValue);
				}
			}
			
			const result = {
				values: this.tempSelectedValues,
				labels: this.tempSelectedLabels,
				items: this.selectedItems,
				target: this.title,
				valueType: detectedValueType, // 使用检测到的类型
				processedValue: finalValue // 添加处理后的值
			};
			
			// 确保传递正确类型的值
			this.$emit('update:modelValue', Array.isArray(this.modelValue) 
				? result.values.map(v => this.getProcessedValue(v))
				: finalValue
			);
			this.$emit('change', result);
			this.hide();
		},
		
		// 处理取消
		handleCancel() {
			this.hide();
			this.$emit('cancel');
		},
		
		// 检查项是否有子项
		hasChildren(item) {
			if (!item) return false;
			const children = this.getItemChildren(item);
			return children && children.length > 0;
		},
		
		// 处理清除
		handleClear(e) {
			e.stopPropagation();
			if (this.disabled) return;
			
			// 清空选中数据
			this.selectedItems = [];
			this.selectedIndexes = [];
			this.tempSelectedValues = [];
			this.tempSelectedLabels = [];
			
			// 重置模型值 - 对于不同类型使用合适的重置值
			let resetValue = '';
			
			if (this.multiple) {
				this.$emit('update:modelValue', []);
			} else {
				this.$emit('update:modelValue', resetValue);
			}
			
			// 触发change事件
			const emptyResult = {
				values: this.multiple ? [] : resetValue,
				labels: [],
				items: [],
				target: this.title,
				valueType: this.valueType,
				processedValue: resetValue
			};
			this.$emit('change', emptyResult);
		},
		
		// 处理打开
		handleOpen() {
			if (this.disabled) return;
			this.show();
			this.$emit('open');
		},
		
		// 根据值查找项（递归搜索所有嵌套数据）
		findItemByValueInData(items, value) {
			if (!items || items.length === 0 || value === null || value === undefined) return null;
			
			// 转为字符串进行比较，确保数字和字符串类型值能正常匹配
			const valueStr = String(value);
			
			// 先在当前层级查找
			const found = items.find(item => String(this.getItemValue(item)) === valueStr);
			if (found) return found;
			
			// 如果没找到，递归查找子项
			for (const item of items) {
				const children = this.getItemChildren(item);
				if (children && children.length > 0) {
					const foundInChildren = this.findItemByValueInData(children, value);
					if (foundInChildren) return foundInChildren;
				}
			}
			
			return null;
		},
		
		getOptionLabel(value) {
			if (!this.options || this.options.length === 0) return value;
			const option = this.options.find(opt => opt.value === value);
			return option ? option.label : value;
		}
	}
}
</script>

<style lang="scss" scoped>
@import '@/static/styles/index.scss';
.my-picker-container {
	position: relative;
	width: 100%;
}

.my-picker {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 9999;
	
	.picker-mask {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: rgba(0, 0, 0, 0.5);
	}
	
	.picker-panel {
		position: absolute;
		left: 0;
		right: 0;
		bottom: 0;
		height: 70vh;
		background-color: #ffffff;
		border-radius: 20rpx 20rpx 0 0;
		overflow: hidden;
		display: flex;
		flex-direction: column;
		animation: slideUp 0.3s ease;
		
		.picker-header {
			height: 90rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 0 30rpx;
			border-bottom: 1px solid #f5f5f5;
			
			.picker-title {
				font-size: 32rpx;
				font-weight: 500;
				color: #333333;
			}
			
			.picker-btn {
				font-size: 28rpx;
				padding: 10rpx;
				
				&.cancel {
					color: #999999;
				}
				
				&.confirm {
					color: #007aff;
				}
			}
		}
		
		.picker-search {
			padding: 20rpx 30rpx;
			
			.search-box {
				display: flex;
				align-items: center;
				background-color: #f5f5f5;
				border-radius: 10rpx;
				padding: 0 20rpx;
				height: 70rpx;
				
				.iconfont {
					color: #999999;
					font-size: 28rpx;
					
					&.icon-close {
						padding: 10rpx;
					}
				}
				
				.search-input {
					flex: 1;
					height: 70rpx;
					font-size: 28rpx;
					margin: 0 10rpx;
				}
			}
		}
		
		.search-results {
			flex: 1;
			overflow: hidden;
			
			.results-scroll {
				height: 100%;
				
				.result-item {
					padding: 20rpx 30rpx;
					border-bottom: 1px solid #f5f5f5;
					
					.result-text {
						font-size: 28rpx;
						color: #333333;
						margin-bottom: 6rpx;
					}
					
					.result-path {
						font-size: 24rpx;
						color: #999999;
					}
				}
				
				.no-results {
					text-align: center;
					padding: 40rpx;
					color: #999999;
					font-size: 28rpx;
				}
			}
		}
		
		.picker-content {
			flex: 1;
			overflow: hidden;
			
			.picker-columns {
				display: flex;
				height: 100%;
				
				.picker-column {
					flex: 1;
					height: 100%;
					border-right: 1px solid #f5f5f5;
					
					&:last-child {
						border-right: none;
					}
					
					.picker-item {
						padding: 24rpx 20rpx;
						text-align: center;
						font-size: 28rpx;
						color: #333333;
						white-space: nowrap;
						overflow: hidden;
						text-overflow: ellipsis;
						
						&.active {
							color: #007aff;
							background-color: #f0f8ff;
						}
					}
				}
			}
		}
	}
}

.picker-trigger {
	position: relative;
	height: 36px;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: none;
	overflow: hidden;
}

.trigger-content {
	max-width: 90rpx;
	font-size: 14px;
	color: rgba(0, 36, 87, 1);
	height: 36px;
	line-height: 36px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.action-area {
	height: 100%;
	display: flex;
	align-items: center;
}

.clear-icon {
	color: #999;
	font-size: 14px;
	width: 20px;
	height: 20px;
	display: flex;
	justify-content: center;
	align-items: center;
}

.arrow-icon {
	color: #999;
	font-size: 12px;
	width: 16px;
	display: flex;
	justify-content: center;
	align-items: center;
	margin-top: 5rpx;
}

.picker-search {
	padding: 10px;
	border-bottom: 1px solid #e0e0e0;
}

.search-box {
	display: flex;
	align-items: center;
	background-color: #f5f5f5;
	border-radius: 20px;
	padding: 0 15px;
	height: 36px;
}

.search-input {
	flex: 1;
	height: 36px;
	margin: 0 8px;
	font-size: 14px;
	background-color: transparent;
}

.my-picker-container[align="right"] {
	.trigger-content {
		justify-content: flex-end;
		padding-right: 45rpx; // 减小为清除按钮和箭头留出的空间
	}
}

.my-picker-container[align="left"] {
	.trigger-content {
		justify-content: flex-start;
	}
}

.placeholder {
	color: #999;
}

.arrow {
	display: inline-block;
	width: 0;
	height: 0;
	border-left: 8rpx solid transparent;  // 减小尺寸
	border-right: 8rpx solid transparent; // 减小尺寸
	border-top: 8rpx solid #C0C4CC;       // 减小尺寸
	margin-right: 6rpx; // 减小间距
}


/* 添加filter样式支持 */
.item.filter {
	.my-picker-container {
		width: 100%;
	}
	
	.picker-trigger {
		border: none;
		border-radius: 8rpx;
		height: 64rpx;
		padding: 0 20rpx;
	}
	
	.trigger-content {
		font-size: 26rpx;
		color: rgba(0, 36, 87, 1);
	}
	
	.placeholder {
		color: #999999;
	}
	
	.arrow {
		border-top-color: #999999;
		transform: scale(0.8);
	}
}

/* 添加filter-picker样式支持 */
.my-picker-container.filter-picker {
	.picker-trigger {
		border: none;
		border-radius: 8rpx;
		height: 64rpx;
		padding: 0 20rpx;
	}
	
	.trigger-content {
		font-size: 26rpx;
		color: rgba(0, 36, 87, 1);
	}
	
	.placeholder {
		color: #999999;
	}
	
	.arrow {
		border-top-color: #999999;
		transform: scale(0.8);
	}
}

@keyframes slideUp {
	from {
		transform: translateY(100%);
	}
	to {
		transform: translateY(0);
	}
}
</style> 